<!--
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <detail-container ref="containerRef" header="流程进度" destroy-on-close :close-on-overlay-click="false">
    <t-tabs v-model="tabs" class="gl-h100 gl-tabs-auto-h gl-tabs-space">
      <t-tab-panel value="1" label="审批记录">
        <audit-log :data="logs" />
      </t-tab-panel>
      <t-tab-panel value="2" label="流程进度">
        <renderer :data="nodes" disabled style="height: 100%" />
      </t-tab-panel>
    </t-tabs>
  </detail-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { DetailContainer } from '@/components';
import AuditLog from '@/pages/flow/process/monitor/AuditLog.vue';
import Renderer from '@/soar/components/LgFlowChat/Renderer.vue';
import api from './api';

const containerRef = ref();
const tabs = ref('1');
const procInstId = ref();
const logs = ref([]);
const nodes = ref([]);

defineExpose({
  open(row: any) {
    procInstId.value = row.procInstId;
    containerRef.value.open();
    api.progress(row.procInstId).then((res: any) => {
      nodes.value = res.nodes;
      logs.value = res.logs;
    });
  },
});
</script>
